<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目名称:" class="font">
              <a-input v-model="queryParam.pjtname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="行政区:" class="font">
              <a-select
                v-model="queryParam.city"
                @change="changeCity"
                :disabled="isInput"
              >
                <a-select-option
                  :value="item.no"
                  v-for="(item, index) in citydata"
                  :key="index"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <a-form-item>
              <a-select v-model="queryParam.area" :disabled="isInput2">
                <a-select-option
                  :value="item.no"
                  v-for="(item, index) in xiandata"
                  :key="index"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button type="primary" @click="Exportpjt" class="cz"
                >导出项目</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                class="cz"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      bordered
      rowKey="dataSec"
      ref="table"
      :scroll="{ x: 0 }"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      @change="handleTableChange"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <span slot="pjtcount" slot-scope="text, record">
        <a @click="detaildata(text, record, 1)">{{ text }}</a>
      </span>
      <span slot="xmName" slot-scope="text, record">
        <a @click="detaildata(text, record, 2)">{{ text }}</a>
      </span>
      <span slot="action" slot-scope="text, record">
        <div
          v-if="record.xmJd == '0' || record.xmJd == '' || record.xmJd == null"
        >
          <div v-if="record.isbbba == '1'">
            <a v-if="record.sum != 1">已备案</a>&nbsp;&nbsp;
            <a v-if="record.sum != 1" @click="detaildata(text, record, 2)"
              >查看详情</a
            >
          </div>
          <div v-else>
            <div v-if="user.role == 'sheng' || user.role == 'shi'">
              <a v-if="record.sum != 1" @click="XMban(record)">项目备案</a>&nbsp;
              <a v-if="record.sum != 1" @click="detaildata(text, record, 2)"
                >查看详情</a
              >
            </div>
            <span v-else>
              <span v-if="record.sum != 1">未备案</span>&nbsp;&nbsp;
              <a v-if="record.sum != 1" @click="detaildata(text, record, 2)"
                >查看详情</a
              >
            </span>
          </div>
        </div>
        <div v-else>
          <a v-if="record.sum != 1" @click="detaildata(text, record, 2)"
            >查看详情</a
          >
        </div>
      </span>
    </a-table>
    <div style="display: flex; justify-content: space-between">
      <div></div>
      <a-pagination
        style="padding-top: 16px; padding-right: 20px"
        v-model="ipagination.current"
        :showSizeChanger="true"
          @showSizeChange="handleTableChange"
        @change="pagechange1"
        :show-total="(total) => `共 ${ipagination.total} 条`"
        :total="ipagination.total"
        show-quick-jumper
      />
    </div>
  </div>
</template>

<script>
import {
  loadListData,
  fkCitylist,
  cityQueryXian,
  updatezt,
} from "../../api/api";
import {exportProject,filewjls} from '../../api/api2'
import axios from "axios";
import {tableminx} from '../../mixins/tablemix'
export default {
  mixins:[tableminx],
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return t.sum != 1 ? parseInt(index) + 1 : "合计";
          },
        },
        {
          title: "项目编号",
          dataIndex: "xmXmbh",
          align: "left",
          scopedSlots: { customRender: "pjtcount" },
          width: 150,
        },
        {
          title: "项目名称",
          dataIndex: "xmName",
          align: "left",
          scopedSlots: { customRender: "xmName" },
          width: 200,
        },
        {
          title: "行政区",
          dataIndex: "xmXzqmc",
          align: "left",
          width: 150,
        },
        {
          title: "备案编号",
          dataIndex: "xmBabh",
          align: "left",
          width: 100,
        },
        {
          title: "设施农业类型",
          dataIndex: "xmSsnylx",
          width: 200,
          align: "left",
          customRender: (xmSsnylx, record, index) => {
            var ssnylxs = record.xmSsnylx;
            console.log(ssnylxs, "1111");
            var ssnylstr = "";
            if (ssnylxs == null || ssnylxs == "") {
              return "";
            } else {
              var ssnyssz = ssnylxs.split(",");
              if (ssnyssz.length > 0) {
                for (var i = 0; i < ssnyssz.length; i++) {
                  if (ssnyssz[i].length > 0) {
                    if (ssnyssz[i] == "1") {
                      ssnylstr += "作物种植设施农用地  ";
                    } else if (ssnyssz[i] == "2") {
                      ssnylstr += "畜禽水产养殖设施农用地  ";
                    }
                  }
                }
              }
              return ssnylstr;
            }
          },
        },
        {
          title: "设施农业申请用地面积(公顷)",
          dataIndex: "xmZydmj",
          align: "left",
          width: 200,
          scopedSlots: { customRender: "xmZydmj" },
        },
        {
          title: "生产设施用地面积(公顷)",
          dataIndex: "xmScssydmj",
          align: "left",
          width: 170,
          scopedSlots: { customRender: "xmScssydmj" },
        },
        {
          title: "辅助设施用地(公顷)",
          dataIndex: "xmFzssydmj",
          width: 140,
          align: "left",
          scopedSlots: { customRender: "xmFzssydmj" },
        },
        {
          title: "操作",
          width: 130,
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      selectedRowKeys: [],
      dataSource: [],
      iscont: false,
      qx: false,
      user: JSON.parse(localStorage.getItem("user")),
      sel: true,
    };
  },
  mounted() {
    this.dataList();
    this.getCtiydata();
    this.changeCity();
  },
  methods: {
    //获取报件箱列表数据
    async dataList() {
      if (this.user.role == "xian" || this.user.role == "shi") {
        this.queryParam.area =
        this.user.role == "xian" ? this.user.fkDept : this.queryParam.area;
        this.queryParam.city = this.user.fkDept.slice(0, 4);
        this.isInput2 = this.user.role == "xian" ? true : false;
        this.isInput = true;
      }
      const pag = this.ipagination;
      const params = {
        keyWord: this.queryParam.pjtname,
        pageNo: pag.current,
        pageSize: pag.pageSize,
        city: this.queryParam.city,
        area: this.queryParam.area,
        status: 0,
      };
      const data = await loadListData(params);
      if (data.code == 200) {
        const res = data.result.records;
        this.dataSource = res;
        let sum = res.reduce(
          (accumulator, currentValue) => accumulator + currentValue.xmZydmj,
          0
        );
        let sum1 = res.reduce(
          (accumulator, currentValue) => accumulator + currentValue.xmScssydmj,
          0
        );
        let sum2 = res.reduce(
          (accumulator, currentValue) => accumulator + currentValue.xmFzssydmj,
          0
        );
        this.dataSource.push({
          dataSec: "",
          xmZydmj: sum.toFixed(4),
          xmScssydmj: sum1.toFixed(4),
          xmFzssydmj: sum2.toFixed(4),
          sum: "1",
        });
        pag.total = data.result.total;
      }else
      {
        this.$message.error(data.message)
      }
    },
    //表格复选框事件
    onSelectChange(selectedRowKeys) {
      var a = (this.sel = !this.sel);
      if (a == false) {
        const arr = selectedRowKeys;
        this.selectedRowKeys = arr.filter((item) => item != "");
      } else if (a == true) {
        this.selectedRowKeys = [];
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination.current = pagination;
      this.ipagination.pageSize = filters;
      this.dataList();
      this.selectedRowKeys = [];
      this.qx = false;
    },
    //查询
    searchQuery() {
      this.dataList();
    },
    //重置
    searchReset() {
      this.queryParam = { area: "", city: "" };
      this.dataList();
    },
    //跳转到设施农业用地详情
    detaildata(text, data, index) {
      this.$router.push({
        path: "/admin/agriculand",
        query: {
          type: "detail",
          diff: index == 1 ? "xq" : "xn",
          id: data.dataSec,
        },
      });
    },
    //导出项目
    async Exportpjt(e) {
      if (this.selectedRowKeys.length > 0) {
        const params = {
          data: this.selectedRowKeys.join(","),
        };
        const res = await exportProject(params)
        if(res.status == 200)
        {
            const content = res.data;
            const contentDisposition =
            res.headers["content-disposition"].split("attachment; name=")[1];
             // 文件流
            filewjls(content,contentDisposition)
            this.selectedRowKeys = [];
        }else
        {
          this.$message.error('导出错误')
        }
      } else {
        this.$message.warn("请选择需要导出得数据！");
      }
    },
    //项目备案
  async  XMban(record){
    console.log(record.dataSec);
          const data = await updatezt({datasec:record.dataSec})
          if(data.code == 200)
          {
            this.$message.success('备案成功')
            this.dataList();
          }else
          {
            this.$message.error('备案失败')
          }
    },
    pagechange1(start, end) {
      this.ipagination.pageNo = start;
      this.ipagination.pageSize = end;
      this.dataList();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-table-align-center {
  //   background: #e4f6ff !important;
  font-weight: bold !important;
}
/deep/ .ant-table-align-left {
  font-weight: bold !important;
}
.font {
  font-weight: 700;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  color: #4d5259;
}
.gongneng {
  padding-bottom: 15px;
  .shangb {
    margin-left: 50px;
  }
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 10px;
}
.cz {
  margin-left: 8px;
}
.table-page-search-wrapper {
  margin-top: 10px;
}
/deep/ .ant-table-body {
  //样式穿透
  overflow-x: auto !important;
}
</style>